import { generate } from '@ant-design/colors';
import { useGlobalStore } from '../store/global-store';
import { globalStyle } from '../../pages.json';
/**
 * 默认主题配置
 */
export const themeDefaultConfig = {
  mode: false, // 灰色模式
  dark: false, // 暗色模式
  primaryColor: '#3265F5', // 主题色
  loginPrimaryColor: '', //登录页主题色
  colors: ['#3265F5', '#F3752D', '#E34F47', '#02A863'], // 主题色值
};

/**
 * 主题变量
 * @param {Object} param
 * @param {String} param.primaryColor 主题色
 * @param {Boolean} param.dark 暗色主题
 * @returns
 */
export function buildThemeVariables({ primaryColor, dark }) {
  const vars = {};
  // 主题色
  const keys = [
    { key: 'primary', color: primaryColor },
    { key: 'gray', color: '#d9d9d9' }, // 系统灰色
  ];
  keys.forEach((item) => {
    const colors = generate(item.color, {
      theme: dark ? 'dark' : 'default',
    });
    colors.forEach((color, index) => {
      vars[`--je-${item.key}-${index + 1}`] = color;
    });
  });
  if (!dark) {
    // 由于计算出来都是#ffffff，所以自行设定颜色值
    vars['--je-gray-1'] = '#f9f9f9';
    vars['--je-gray-2'] = '#f8f8f8';
    vars['--je-gray-3'] = '#f5f5f5';
  }

  vars['--je-gray-color'] = dark ? vars['--je-gray-1'] : vars['--je-gray-4'];
  vars['--je-border-color'] = dark ? vars['--je-gray-2'] : vars['--je-gray-5'];
  vars['--je-primary-color'] = vars['--je-primary-6'];

  // 基础色
  const defaultColors = {
    white: '#ffffff',
    textColor: '#333333',
  };
  const darkColors = {
    white: '#141414',
    textColor: vars['--je-gray-6'],
  };

  const baseColors = dark ? darkColors : defaultColors;
  Object.assign(vars, {
    '--je-text-color': baseColors.textColor,
    '--je-white-color': baseColors.white,
  });

  return vars;
}

export function getNavigationBarColor() {
  const store = useGlobalStore();
  const { navigationBarBackgroundColor } = globalStyle;
  return store.theme.dark
    ? { frontColor: '#ffffff', backgroundColor: '#000000' }
    : { frontColor: '#000000', backgroundColor: navigationBarBackgroundColor };
}
